<template>
	<div>
		<el-collapse v-model="activeNames" @change="handleChange" accordion>
			<el-collapse-item class="sqlone" :name="index" style="background-color: #00FFFF;" v-for="(item,index) in sqlData">
				<template #title>
					<i class="el-icon-circle-plus"></i>
					<el-tag>SQL：业务场景：{{item.sqlDemand}}</el-tag>
				</template>
				<el-divider></el-divider>
				<div>

					<p>
						<el-tag checked>##业务场景：{{item.sqlDemand}}</el-tag>
					</p>
					<el-divider></el-divider>
					<p>
						<el-tag type="warning" checked>##{{item.sqlAnalysis}}</el-tag>
					</p>
					<el-divider></el-divider>
					<p style=" word-wrap: break-word;word-break: normal;">
						<el-input type="textarea" placeholder="请输入内容" :value="item.sqlSentence">
						</el-input>
					</p>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
	import {
		get
	} from "../../plugin/http.js"
	export default {
		name: 'sqldemo',
		data: () => ({
			activeNames: '',
			sqlData: []
		}),
		created: function() {
			this.initSql();
		},
		methods: {
			initSql() {
				get("/getPracticesql", {}).then(res => {
					debugger
					if (res.data.code == 200) {
						this.sqlData = res.data.data;
					}
				})
			},
		}
	}
</script>

<style scoped>
	.sqone .el-collapse-item__header {
		background-color: #00FFFF;
	}

	p {
		position: relative;
		left: 20px;
	}
</style>
